<template> 
    <el-card class="form-container" shadow="never">
        <el-form :model="shopSms" :rules="rules" ref="ShopSmsFrom" label-width="150px">


                   <!--
                        <el-form-item
                            label="序号"
                            prop="id">
                        <el-input v-model="shopSms.id" style="width: 370px;"/>
                    </el-form-item>
                    -->


                    <el-form-item
                            label="短信内容"
                            prop="smsContent">
                        <el-input type="textarea" v-model="shopSms.smsContent" style="width: 370px;"/>
                    </el-form-item>


                    <el-form-item
                            label="接收客户"
                            prop="receiveTels">
                        <el-input   @click.native="showSelectDialog"  v-model="shopSms.receiveTels" style="width: 370px;"/>
                    </el-form-item>


                    <el-form-item
                            label="发送数量"
                            prop="sendNum">
                        <el-input readonly="true" v-model="shopSms.sendNum" style="width: 370px;"/>
                    </el-form-item>


                    <el-form-item
                            label="消费金额"
                            prop="money">
                       <el-input-number v-model="shopSms.money" :precision="2" :step="0.1" ></el-input-number>
                    </el-form-item>


                   <!--
                        <el-form-item
                            label="创建人编号"
                            prop="createBy">
                        <el-input v-model="shopSms.createBy" style="width: 370px;"/>
                    </el-form-item>


                    <el-form-item
                            label="创建人姓名"
                            prop="createName">
                        <el-input v-model="shopSms.createName" style="width: 370px;"/>
                    </el-form-item>


                    <el-form-item
                            label="创建日期"
                            prop="createTime">
                        <el-input v-model="shopSms.createTime" style="width: 370px;"/>
                    </el-form-item>
                    -->


            <el-form-item>
                <el-button type="primary" @click="onSubmit('ShopSmsFrom')">提交</el-button>
                <el-button v-if="!isEdit" @click="resetForm('ShopSmsFrom')">重置</el-button>
            </el-form-item>
        </el-form>
         <el-dialog
            title="选择发送人" 
            :visible.sync="dialogVisible"
            width="60%">
            <el-transfer :filterable="true" v-model="value" :data="transData"></el-transfer>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="setTransData">确 定</el-button>
            </span>
            </el-dialog>
    </el-card>
   

</template>
<script>
    import {createShopSms, getShopSms, updateShopSms} from '@/api/sms/shopSms'
     import {listByMerchant as listMember} from '@/api/ums/member'
    
    import SingleUpload from '@/components/Upload/singleUpload'

    const defaultShopSms = {
        name: ''
    };
    export default {
        name: 'ShopSmsDetail',
        components: {SingleUpload},
        props: {
            isEdit: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
            transData:[],
            value: [],
            dialogVisible: false,
            shopSms:
            Object.assign({},
        defaultShopSms),
            rules: {
                smsContent: [
                    {required: true, message: '请输入内容', trigger: 'blur'},
                    {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
                ]
            }
        }
        },
        created() {
            this.getTransData();
            if (this.isEdit) {
                getShopSms(this.$route.query.id).then(response => {
                    this.shopSms = response.data;
                    this.value = this.shopSms.receiveTels.spilt(",")
            })
                ;
            } else {
                this.shopSms = Object.assign({},
            defaultShopSms)
                ;
            }
            
        },
        methods: {
            setTransData(){
                this.shopSms.receiveTels = this.value.join(",")
                this.shopSms.sendNum = this.value.length
                this.dialogVisible = false;
            },
            getTransData(){
                listMember().then(response =>{
                    if(response.code == 200){
                        let d = response.data;
                        if(d){
                            this.transData = [];
                            for(let item of d){
                                this.transData.push({
                                     label: item.username+"【"+item.phone+"】",
                                     key: item.phone
                                })
                            }
                        }
                    }else
                    {
                        this.$message({
                            message: response.msg,
                            type: 'error',
                            duration: 1000
                        });
                    }
                });
            },
            showSelectDialog(){
                this.dialogVisible = true;
            },
            onSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if(valid) {
                        this.$confirm('是否提交数据', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            if(this.isEdit
                    )
                        {
                            updateShopSms(this.$route.query.id, this.shopSms).then(response => {
                                if(response.code == 200
                        )
                            {
                                this.$refs[formName].resetFields();
                                this.$message({
                                    message: '修改成功',
                                    type: 'success',
                                    duration: 1000
                                });
                                this.$router.back();
                            }
                        else
                            {
                                this.$message({
                                    message: response.msg,
                                    type: 'error',
                                    duration: 1000
                                });
                            }

                        })
                            ;
                        }
                    else
                        {
                            createShopSms(this.shopSms).then(response => {
                                if(response.code == 200
                        )
                            {
                                this.$refs[formName].resetFields();
                                this.shopSms = Object.assign({},
                            defaultShopSms)
                                ;
                                this.$message({
                                    message: '提交成功',
                                    type: 'success',
                                    duration: 1000
                                });
                                this.$router.back();
                            }
                        else
                            {
                                this.$message({
                                    message: response.msg,
                                    type: 'error',
                                    duration: 1000
                                });
                            }

                        })
                            ;
                        }
                    })
                        ;

                    } else {
                        this.$message({
                            message: '验证失败',
                            type: 'error',
                            duration: 1000
                        });
                return false;
            }
            })
                ;
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.shopSms = Object.assign({},
            defaultShopSms)
                ;
            }
        }
    }
</script>
<style>
</style>


